<template>
  <div class="child-Category">
    <!-- 头部区域 -->
    <el-button type="primary" @click="$router.back()">返回类别管理</el-button>
  <!-- 卡片区域 -->
  <el-card class="box-card">
    <!-- 查询商品信息区域 -->
   <el-form
    :inline="true"
    :model="formInline"
    ref="numberValidateForm"
    class="demo-form-inline"
    :rules="rules"
   >
    <el-form-item label="子类别名称" prop="user">
      <el-input v-model="formInline.user" placeholder="商品编号/商品名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="resetForm">重置</el-button>
    </el-form-item>
   </el-form>
  </el-card>
  <!-- 双边按钮区域 -->
  <div class="buttonAround">
  <div class="dd">
    <span>子类别总数:{{productList.length}}</span>
  </div>
  <el-button type="primary" @click="dialogVisible=true">新增子类别</el-button>
  </div>
  <!-- 表单模块 -->
  <!-- 卡片区域2 -->
  <el-card class="box-card2">
    <!-- 表格数据列表 -->
     <template>
    <el-table
    border
    :data="productList"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="goods_child_type_name"
        label="子类别名称"
        width="400">
      </el-table-column>
      <el-table-column
      align="center"
        prop="goods_child_type_order"
        label="排序"
        width="400">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="操作">
        <template slot-scope="scope">
              <!-- slot-scope="scope" -->
              <!-- 编辑按钮 -->
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="redact(scope.row.goods_child_type_id)"
              >编辑</el-button>
               <!-- 删除按钮 -->
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="deleteSon(scope.row.goods_child_type_id)"
              >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  </el-card>
  <!-- 添加模块 -->
  <el-dialog
      title="新增子类别"
      :visible.sync="dialogVisible"
      width="30%"
      @close="addDialogClosed">
      <el-form ref="ruleForm" :model="form" label-width="80px" :rules="addFormRules">
      <el-form-item label="类别名称" prop="goods_child_type_name">
        <el-col :span="20">
        <el-input v-model="form.goods_child_type_name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="排序" prop="goods_child_type_order">
        <el-col :span="10">
        <el-input v-model.number="form.goods_child_type_order" placeholder="请输入数字"></el-input>
        </el-col>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getbuttonto">确 定</el-button>
      </span>
</el-dialog>
<!-- 子类别修改 -->
<el-dialog
  title="编辑子类别"
  :visible.sync="TheeditorVisible"
  width="30%"
  @close="editDialogClosed">
  <el-form ref="ruleFormss" :model="soncompile" label-width="80px" :rules="editFormRules">
  <el-form-item label="类别名称" prop="goods_child_type_name">
     <el-col :span="20">
    <el-input v-model="soncompile.goods_child_type_name"></el-input>
    </el-col>
  </el-form-item>
  <el-form-item label="排序" prop="goods_child_type_order">
    <el-col :span="10">
    <el-input v-model.number="soncompile.goods_child_type_order" placeholder="请输入数字"></el-input>
    </el-col>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="TheeditorVisible = false">取 消</el-button>
     <el-button type="primary" @click="TheeditorButton">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { childClass, addsubclass, compid, compilesubclass, compdelete } from '@/api/user'
export default {
  name: 'childIndex',
  props: {
  },
  data () {
    return {
      rules: {
        user: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      formInline: {
        user: ''
      },
      // 验证表单
      addFormRules: {
        goods_child_type_name: [
          { required: true, message: '请输入类别名称', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
        goods_child_type_order: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字' }
        ]
      },
      // 修改表单验证
      editFormRules: {
        goods_child_type_name: [
          { required: true, message: '请输入类别名称', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
        goods_child_type_order: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字' }
        ]
      },
      form: {
        goods_type_id: 0,
        goods_child_type_name: '',
        goods_child_type_order: ''
      },
      productList: [],
      dialogVisible: false, // 添加窗口
      id: 0,
      soncompile: {}, // 编辑
      TheeditorVisible: false// 编辑窗口
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getsubcategory()
    // console.log(this.$router.query.id)
    console.log(this.$route.query.id)
  },
  mounted () {
  },
  methods: {
    resetForm () {
      console.log(123)
      this.$refs.numberValidateForm.resetFields()
    },
    // 获取id
    async getsubcategory () {
      this.id = this.$route.query.id
      const { data } = await childClass(this.id)
      this.productList = data.data.childTypeList
      console.log(data)
    },
    addDialogClosed () {
      this.$refs.ruleForm.resetFields()
    },
    // 获取新增事件
    async getbuttonto () {
      this.$refs.ruleForm.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        try {
          const { data } = await addsubclass({
            goods_type_id: this.id,
            goods_child_type_name: this.form.goods_child_type_name,
            goods_child_type_order: this.form.goods_child_type_order
          })
          this.dialogVisible = false
          this.$message.success('添加子类别成功')
          this.getsubcategory()
          console.log(data)
        } catch (err) {
          this.$message.error('添加子类别失败')
        }
      })
    },
    // 获取编辑事件
    async redact (id) {
      console.log(id)
      this.TheeditorVisible = true
      try {
        const { data } = await compid(id)
        this.soncompile = data.meta.msg
        console.log(this.soncompile)
        console.log(data)
      } catch (err) {
        this.$message.error('获取子类别失败')
      }
    },
    editDialogClosed () {
      this.$refs.ruleFormss.resetFields()
    },
    // 编辑修改事件
    async TheeditorButton () {
      this.$refs.ruleFormss.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        try {
          const { data } = await compilesubclass(this.soncompile.goods_child_type_id, {
            goods_child_type_name: this.soncompile.goods_child_type_name,
            goods_child_type_order: this.soncompile.goods_child_type_order
          })
          this.$message.success('修改子类别成功')
          this.TheeditorVisible = false
          this.getsubcategory()
          console.log(data)
        } catch (err) {
          this.$message.error('修改子类别失败')
        }
      })
    },
    // 获取删除事件
    async deleteSon (id) {
      console.log(id)

      const confitmResult = await this.$confirm('是否删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).catch(err => err)
      if (confitmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data } = await compdelete(id)
      console.log(data)
      this.$message.success('删除商品成功')
      this.getsubcategory()
    }
  }
}
</script>

<style scoped lang="less">
.buttonAround{
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-flow:  row nowrap;
  justify-content: space-between;
  .leibie{
      margin-right: 100px;
  }
}
</style>
